<template>
  <div style="max-height: 770px;overflow-y: auto">
    <el-row style="margin-bottom: 20px">
      时间范围：
      <el-date-picker
        v-model="time"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button @click="search" type="primary" style="margin-left: 20px">搜索</el-button>
      <el-button @click="outgoing" type="primary" style="margin-left: 20px">外出情况导出</el-button>
    </el-row>
    <el-table border :data="table1" stripe style="width: 100%;margin-bottom: 20px">
      <el-table-column prop="number" label="序号" width="80"/>
      <el-table-column prop="department" label="单位" width="140"/>
      <el-table-column prop="realNumber" label="实有数" width="70"/>
      <el-table-column prop="reignNumber" label="在位数" width="70"/>
      <el-table-column prop="outNumber" label="外出数" width="70"/>
      <el-table-column prop="holidayNumber" label="休假" width="70"/>
      <el-table-column prop="studyNumber" label="学习" width="70"/>
      <el-table-column prop="awayNumber" label="出差" width="70"/>
      <el-table-column prop="seeDoctorNumber" label="看病" width="70"/>
      <el-table-column prop="secondNumber" label="借调" width="70"/>
      <el-table-column prop="absenceNumber" label="事假" width="70"/>
      <el-table-column prop="trainingNumber" label="集训" width="70"/>
      <el-table-column prop="jobTransferNumber" label="待转业" width="70"/>
      <el-table-column prop="retireNumber" label="退休待移交" width="100"/>
      <el-table-column prop="duty" label="值班员" width="120">
        <template slot-scope="scope">
          <el-input  @blur="handlerChange(scope.row)" v-model="scope.row.personName"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="occupancyRate" label="在位率" width="80"/>
      <el-table-column prop="remark" label="备注"/>
    </el-table>
    <el-table border :data="table2" stripe style="width: 100%;margin-bottom: 20px">
      <el-table-column prop="total" label="总数"/>
      <el-table-column prop="cadre" label="干部"/>
      <el-table-column prop="soldier" label="士兵"/>
    </el-table>
    <el-table border :data="table3" stripe style="width: 100%;margin-bottom: 20px">
      <el-table-column prop="awayNumber" label="出差"/>
      <el-table-column prop="holidayNumber" label="休假"/>
      <el-table-column prop="studyNumber" label="学习"/>
      <el-table-column prop="jobTransferNumber" label="待转业"/>
      <el-table-column prop="absenceNumber" label="事假"/>
      <el-table-column prop="retireNumber" label="待安置"/>
      <el-table-column prop="secondNumber" label="借调"/>
      <el-table-column prop="trainingNumber" label="集训"/>
      <el-table-column prop="seeDoctorNumber" label="看病"/>
    </el-table>
    <template>
      <el-button @click="handlerExportOut" type="primary" style="margin-bottom: 20px">外出人员列表导出</el-button>
      <el-table
        :data="tableData" border style="width: 100%"
      >
        <el-table-column prop="typeText" label="请假类型" width="250"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="350"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="350"></el-table-column>
        <el-table-column label="状态" width="350">
          <template slot-scope="scope">
            {{scope.row.cancellation==2?'已销假':'未销假'}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.id)" type="text" size="small">销假</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog
      :visible.sync="repeatDialogConfig.visible"
      title="销假"
      width="700px"
      append-to-body
    >
      <cancellation
        v-if="repeatDialogConfig.visible"
        :id="repeatDialogConfig.id"
        @hideDialog1="hideDialog1"/>
    </el-dialog>
  </div>
</template>

<script>
import {getApplyData, handlerExportOutApi, outgoing as outgoingApi, outgoingData} from '@/api/dashboard'
import { createFile } from '@/utils/utils'
import Cancellation from '@/views/dashboard/cancellation.vue'
import * as api from "@/api/sports";
import {addCategroy} from "@/api/categoryApi";

export default {
  name: 'Out',
  components: { Cancellation },
  data() {
    return {
      time: '',
      table1: [],
      table2: [
        { id: 1, total: '在外：0', cadre: '在外：0', soldier: '在外：0' },
        { id: 2, total: '在位：0', cadre: '在位：0', soldier: '在位：0' }
      ],
      table3: [],
      startTime: null,
      endTime: null,
      tableData: [{
        id:1,
        typeText: '外出',
        startTime: '2016-05-02',
        endTime: '2016-05-02',
        name: '王小虎'
      }],
      repeatDialogConfig: {
        visible: false,
        id: null
      }
    }
  },
  watch: {
    time(val) {
      if (val != null) {
        this.startTime = val[0]
        this.endTime = val[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
    }
  },
  mounted() {
    this.getDetail()
    this.getTableData()
  },
  methods: {
    handlerChange(row){
      addCategroy({id:row.id,personName:row.personName},3).then(res=>{
        this.$message.success('操作成功');
        this.search();
      })
    },
    handlerExportOut(){
      let loading = this.$loading({
        lock: true,
        text: '导出中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      handlerExportOutApi({ startTime: this.startTime, endTime: this.endTime })
        .then((res) => {
          if (!createFile(res, '外出人员列表')) {
            this.$message.success('未知的文件格式')
          }
          loading.close()
        })
        .catch((res) => {
          loading.close()
        })
    },
    hideDialog1() {
      this.repeatDialogConfig.visible = false
      this.getTableData()
    },
    getTableData() {
      getApplyData({ startTime: this.startTime, endTime: this.endTime }).then(res => {
        this.tableData = res
      })
    },
    handleClick(id) {
      this.repeatDialogConfig.id = id
      this.repeatDialogConfig.visible = true
    },
    outgoing() {
      this.$confirm('确定要导出吗').then(() => {
        const loading = this.$loading({ text: '正在导出' })
        outgoingApi({ startTime: this.startTime, endTime: this.endTime }).then(res => {
          if (!createFile(res)) {
            this.$message.success('未知的文件格式')
          }
        }).finally(() => {
          loading.close()
        })
      })
    },
    search() {
      outgoingData({ startTime: this.startTime, endTime: this.endTime }).then(res => {
        this.table1 = res.list
        this.table3 = res.statisticsModel
        this.table2 = res.countByPersonType
      })
      this.getTableData()
    },
    close() {
      this.$emit('hideTable')
    },
    getDetail() {
      outgoingData({ startTime: this.startTime, endTime: this.endTime }).then(res => {
        this.table1 = res.list
        this.table3 = res.statisticsModel
        this.table2 = res.countByPersonType
      })
    }
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
